import React, { memo } from 'react';
import { FormattedMessage } from 'umi-plugin-react/locale';
import { Row, Col } from 'antd/es/grid';
import { Card } from 'antd';
import { Pie, WaterWave, TagCloud } from '@/components/Charts';
import styles from './Analysis.less';

const PieChart = memo(({ tags, loading }) => (
  <Row gutter={24}>
    <Col xl={12} lg={24} sm={24} xs={24} style={{ marginBottom: 24 }}>
      <Card
        loading={loading}
        title={
          <FormattedMessage id="app.analysis.faculty-category" defaultMessage="教职工分类占比" />
        }
        bordered={false}
        className={styles.pieCard}
      >
        <Row style={{ padding: '16px 0' }}>
          <Col span={8}>
            <Pie
              animate={false}
              percent={75}
              subTitle={
                <FormattedMessage
                  id="app.analysis.faculty-category.teaching-staff"
                  defaultMessage="教学人员"
                />
              }
              total="75%"
              height={128}
              lineWidth={2}
            />
          </Col>
          <Col span={8}>
            <Pie
              animate={false}
              color="#5DDECF"
              percent={14}
              subTitle={
                <FormattedMessage
                  id="app.analysis.faculty-category.manager"
                  defaultMessage="管理人员"
                />
              }
              total="14%"
              height={128}
              lineWidth={2}
            />
          </Col>
          <Col span={8}>
            <Pie
              animate={false}
              color="#2FC25B"
              percent={11}
              subTitle={
                <FormattedMessage
                  id="app.analysis.faculty-category.support-staff"
                  defaultMessage="后勤人员"
                />
              }
              total="11%"
              height={128}
              lineWidth={2}
            />
          </Col>
        </Row>
      </Card>
    </Col>
    <Col xl={6} lg={12} sm={24} xs={24} style={{ marginBottom: 24 }}>
      <Card
        title={<FormattedMessage id="app.analysis.stuent-source" defaultMessage="生源地" />}
        loading={loading}
        bordered={false}
        bodyStyle={{ overflow: 'hidden' }}
      >
        <TagCloud data={tags} height={161} />
      </Card>
    </Col>
    <Col xl={6} lg={12} sm={24} xs={24} style={{ marginBottom: 24 }}>
      <Card
        loading={loading}
        title={<FormattedMessage id="app.analysis.resource-surplus" defaultMessage="资源剩余" />}
        bodyStyle={{ textAlign: 'center', fontSize: 0 }}
        bordered={false}
      >
        <WaterWave
          height={161}
          title={<FormattedMessage id="app.analysis.fund-surplus" defaultMessage="Fund Surplus" />}
          percent={34}
        />
      </Card>
    </Col>
  </Row>
));

export default PieChart;
